<template>
  <div class="info-item">
    <ul>
      <li v-for="file in files">
        <img :src="file.adjunctAddr" :alt="file.adjunctName">
        <p>{{ file.adjunctName }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        files: []
      }
    },
    created () {
      this.$http.get(`/api/borrow/borrowInfo/borrowAdjunct?borrowOrder=${this.$route.params.borrowOrder}`)
        .then((res) => {
          if (res.data.success) {
            this.files = res.data.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
</script>

<style lang='scss'>
  .info-item {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        flex: 0 0 330px;
        img {
          width: 330px;
          height: 200px;
        }
        p {
          text-align: center;
          font-size: 24px;
          color: #666;
          margin-top: 20px;
          margin-bottom: 40px;
        }
      }
    }
  }
</style>
